<template>

  <div>
    <el-form ref="form" :model="formData" :rules="rules">

      <!-- 数据类型 -->
      <el-form-item :label="typeLabel" prop="type">
        <el-select v-model="formData.type" placeholder="请选择数据类型" class="select-width">
          <el-option
            v-for="dict in dict.type.iot_data_type"
            :key="dict.value"
            :label="`${dict.value}(${dict.label})`"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 布尔值 -->
      <el-form-item v-if="booleanVisible" label="布尔值" prop="trueText">
        <el-row>
          <el-col :span="11">
            <el-form-item prop="trueText">
              <el-input  v-model="formData.trueText" placeholder="描述" />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="joint-mark-icon">
            <i class="el-icon-minus"/>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="trueValue">
              <el-input v-model="formData.trueValue" placeholder="值" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="11">
            <el-form-item prop="falseText">
              <el-input v-model="formData.falseText" placeholder="描述" />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="joint-mark-icon">
            <i class="el-icon-minus"/>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="falseValue">
              <el-input v-model="formData.falseValue" placeholder="值" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 精度 -->
      <el-form-item v-if="scaleVisible" label="精度" prop="scale">
        <el-input-number v-model="formData.scale" controls-position="right" :min="0" placeholder="小数位数"></el-input-number>
      </el-form-item>

      <!-- 单位 -->
      <el-form-item v-if="unitVisible" label="单位" prop="unit">
        <el-cascader
          v-model="formData.unit"
          :show-all-levels="false"
          :options="getCascaderUnitData()"
          placeholder="请选择单位"
          class="select-width"
          clearable
          filterable
          :props="cascaderProps"
        ></el-cascader>
      </el-form-item>

      <!-- 枚举项 -->
      <div v-if="enumVisible" class="el-form-item is-required el-form-item__content el-form-item--medium">
        <label class="el-form-item__label">枚举项</label>
        <el-row :style="spaceBetweenEnumStyle(index)" v-for="(item, index) in formData.elements">
          <el-col :span="9">
            <!-- 枚举描述 -->
            <el-form-item :prop="`elements.${index}.text`" :rules="rules.elements.text">
              <el-input  v-model="item.text" placeholder="描述"/>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="joint-mark-icon">
            <i class="el-icon-right"/>
          </el-col>
          <el-col :span="9">
            <!-- 枚举标识 -->
            <el-form-item :prop="`elements.${index}.value`" :rules="rules.elements.value">
              <el-input v-model="item.value" placeholder="标识"/>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="enum-add-remove-button">
            <!-- 新增枚举项 -->
            <el-button v-show="buttonAddEnumVisible(index)" @click="addEnumDomain" type="text">
              <i class="el-icon-circle-plus-outline enum-add-remove-icon" />
            </el-button>
            <!-- 删除枚举项 -->
            <el-button v-show="buttonRemoveEnumVisible(index)" @click="removeEnumDomain(index)" type="text">
              <i class="el-icon-remove-outline enum-add-remove-icon" />
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 时间格式 -->
      <el-form-item v-if="dateFormatVisible" label="时间格式" prop="format">
        <el-select
          v-model="formData.format"
          placeholder="请选择时间格式"
          clearable
          filterable
          default-first-option
          :allow-create="true"
          class="select-width"
        >
          <el-option
            v-for="dict in dict.type.iot_date_format"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 字符串最大长度 -->
      <el-form-item v-if="maxLengthVisible" label="最大长度" prop="expands.maxLength">
        <el-input v-model="formData.expands.maxLength" placeholder="请输入字符串最大长度"></el-input>
      </el-form-item>

      <!-- JSON对象 -->
      <el-form-item v-show="propertiesVisible" label="JSON对象">
        <el-row v-show="formData.properties.length > 0">
          <el-card body-style="padding: 3px" shadow="never">
            <el-row v-for="(item, index) in formData.properties">
              <el-col :span="17" :offset="1">参数名称：{{ item.name }}</el-col>
              <el-col :span="6">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  v-hasPermi="['iot:product:edit']"
                  @click="handleChildUpdate(item)"
                >编辑</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-delete"
                  v-hasPermi="['iot:product:remove']"
                  @click="handleChildDelete(index)"
                >删除</el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
        <el-row>
          <el-col :span="23" :offset="1">
            <el-button icon="el-icon-plus" type="text" @click="handleChildAdd">添加参数</el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <!------------------------------ 元素类型（开始） --------------------------------->
      <!-- 元素类型 -->
      <el-form-item v-if="elementTypeVisible" label="元素类型" prop="elementType.type">
        <el-select v-model="formData.elementType.type" placeholder="请选择元素类型" class="select-width">
          <el-option
            v-for="dict in dict.type.iot_data_type.filter(currentValue => currentValue.value !== 'array')"
            :key="dict.value"
            :label="`${dict.value}(${dict.label})`"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 布尔值 -->
      <el-form-item v-if="booleanElementVisible" label="布尔值" prop="elementType.trueText">
        <el-row>
          <el-col :span="11">
            <el-form-item prop="elementType.trueText">
              <el-input  v-model="formData.elementType.trueText" placeholder="描述" />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="joint-mark-icon">
            <i class="el-icon-minus"/>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="elementType.trueValue">
              <el-input v-model="formData.elementType.trueValue" placeholder="值" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="11">
            <el-form-item prop="elementType.falseText">
              <el-input v-model="formData.elementType.falseText" placeholder="描述" />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="joint-mark-icon">
            <i class="el-icon-minus"/>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="elementType.falseValue">
              <el-input v-model="formData.elementType.falseValue" placeholder="值" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 精度 -->
      <el-form-item v-if="scaleElementVisible" label="精度" prop="elementType.scale">
        <el-input-number v-model="formData.elementType.scale" controls-position="right" :min="0" placeholder="小数位数"></el-input-number>
      </el-form-item>

      <!-- 单位 -->
      <el-form-item v-if="unitElementVisible" label="单位" prop="elementType.unit">
        <el-cascader
          v-model="formData.elementType.unit"
          :options="getCascaderUnitData()"
          :show-all-levels="false"
          placeholder="请选择单位"
          class="select-width"
          clearable
          filterable
          :props="cascaderProps"
        ></el-cascader>
      </el-form-item>

      <!-- 枚举项 -->
      <div v-if="enumElementVisible" class="el-form-item is-required el-form-item__content el-form-item--medium">
        <label class="el-form-item__label">枚举项</label>
        <el-row :style="spaceBetweenEnumStyle(index)"  v-for="(item, index) in formData.elementType.elements">
          <el-col :span="9">
            <!-- 枚举描述 -->
            <el-form-item :prop="`elementType.elements.${index}.text`" :rules="rules.elementType.elements.text">
              <el-input  v-model="item.text" placeholder="描述"/>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="joint-mark-icon"><i class="el-icon-right"/></el-col>
          <el-col :span="9">
            <!-- 枚举标识 -->
            <el-form-item :prop="`elementType.elements.${index}.value`" :rules="rules.elementType.elements.value">
              <el-input v-model="item.value" placeholder="标识"/>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="enum-add-remove-button">
            <!-- 新增枚举项 -->
            <el-button v-show="buttonAddEnumElementVisible(index)" @click="addEnumElementDomain" type="text">
              <i class="el-icon-circle-plus-outline enum-add-remove-icon" />
            </el-button>
            <!-- 删除枚举项 -->
            <el-button v-show="buttonRemoveEnumElementVisible(index)" @click="removeEnumElementDomain(index)" type="text">
              <i class="el-icon-remove-outline enum-add-remove-icon" />
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 时间格式 -->
      <el-form-item v-if="dateFormatElementVisible" label="时间格式" prop="elementType.format">
        <el-select
          v-model="formData.elementType.format"
          placeholder="请选择时间格式"
          clearable
          filterable
          default-first-option
          :allow-create="true"
          class="select-width"
        >
          <el-option
            v-for="dict in dict.type.iot_date_format"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 字符串最大长度 -->
      <el-form-item v-if="maxLengthElementVisible" label="最大长度" prop="elementType.expands.maxLength">
        <el-input v-model="formData.elementType.expands.maxLength" placeholder="请输入字符串最大长度"></el-input>
      </el-form-item>

      <!-- JSON对象 -->
      <el-form-item v-show="propertiesElementVisible" label="JSON对象">
        <el-row v-show="formData.elementType.properties.length > 0">
          <el-card body-style="padding: 3px" shadow="never">
            <el-row v-for="(item, index) in formData.elementType.properties">
              <el-col :span="17" :offset="1">参数名称：{{ item.name }}</el-col>
              <el-col :span="6">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  v-hasPermi="['iot:product:edit']"
                  @click="handleChildUpdate(item)"
                >编辑</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-delete"
                  v-hasPermi="['iot:product:remove']"
                  @click="handleChildDelete(index)"
                >删除</el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
        <el-row>
          <el-col :span="23" :offset="1">
            <el-button icon="el-icon-plus" type="text" @click="handleChildAdd">添加参数</el-button>
          </el-col>
        </el-row>
      </el-form-item>

    </el-form>

    <!-- 子表单添加或修改对话框 -->
    <properties-child-add-edit
      @visible="handleChildVisible"
      @data="handleChildData"
      ref="propertiesChildAddEdit"
    />

  </div>

</template>

<script>
import utils from '@/utils/iot/metadata'
import PropertiesChildAddEdit from '@/views/iot/product/physical-model/propertiesChildAddEdit'
import { getUnits } from '@/api/iot/product'
export default {
  name: 'ValueTypeAddEdit',
  components: {
    PropertiesChildAddEdit
  },
  // 字典
  dicts: [
    // 数据类型
    'iot_data_type',
    // 日期格式
    'iot_date_format'
  ],
  props: {
    formData: {
      type: Object,
      default: true
    },
    visible: {
      type: Boolean,
      default: true
    },
    typeLabel: {
      type: String,
      default: true
    }
  },
  data() {
    const trueTextRule = [{ required: true, message: '布尔值描述不能为空', trigger: 'change' }]
    const trueValueRule = [{ required: true, message: '布尔值不能为空', trigger: 'change' }]
    const falseTextRule = [{ required: true, message: '布尔值描述不能为空', trigger: 'change' }]
    const falseValueRule = [{ required: true, message: '布尔值不能为空', trigger: 'change' }]
    const formatRule = [{ required: true, message: '时间格式不能为空', trigger: 'change' }]
    const elementsRule = {
      value: [{ required: true, message: '标识不能为空', trigger: 'change' }],
      text: [{ required: true, message: '描述不能为空', trigger: 'change' }]
    }
    const maxLengthRule = [{
      message: '最大长度必须是正整数', trigger: 'change',
      validator: (rule, value, callback) => {
        if (!value) {
          callback()
          return
        }
        const isPositiveInteger = /^[1-9]\d*$/.test(value)
        if (!isPositiveInteger) {
          callback(new Error('最大长度必须是正整数'))
          return
        }
        callback()
      }
    }]

    return {
      // 级联选择器参数
      cascaderProps: {
        emitPath: false // 只返回该节点的值
      },

      // 单位默认隐藏
      unitVisible: false,
      // 单位
      units: [],
      // 精度默认隐藏
      scaleVisible: false,
      // 布尔值输入框默认隐藏
      booleanVisible: false,
      // 字符串最大长度默认隐藏
      maxLengthVisible: false,
      // 枚举输入框默认隐藏
      enumVisible: false,
      // 时间格式默认隐藏
      dateFormatVisible: false,
      // JSON对象选择框默认隐藏
      propertiesVisible: false,
      /*************** 元素类型（开始） ******************/
      // 元素类型默认隐藏
      elementTypeVisible: false,
      // 单位默认隐藏
      unitElementVisible: false,
      // 精度默认隐藏
      scaleElementVisible: false,
      // 布尔值输入框默认隐藏
      booleanElementVisible: false,
      // 字符串最大长度默认隐藏
      maxLengthElementVisible: false,
      // 枚举输入框默认隐藏
      enumElementVisible: false,
      // 时间格式默认隐藏
      dateFormatElementVisible: false,
      // JSON对象选择框默认隐藏
      propertiesElementVisible: false,
      /*************** 元素类型（结束） ******************/
      // 表单校验
      rules: {
        /*数据类型*/
        type: [
          { required: true, message: '数据类型不能为空', trigger: 'change' }
        ],
        /*布尔值描述*/
        trueText: trueTextRule,
        /*布尔值*/
        trueValue: trueValueRule,
        /*布尔值描述*/
        falseText: falseTextRule,
        /*布尔值*/
        falseValue: falseValueRule,
        /*时间格式*/
        format: formatRule,
        /*枚举项*/
        elements: elementsRule,
        /*拓扑定义*/
        expands: {
          /*字符串最大长度*/
          maxLength: maxLengthRule
        },
        /********************* 元素类型（开始） ***********************/
        elementType: {
          /*数据类型*/
          type: [
            { required: true, message: '元素类型不能为空', trigger: 'change' }
          ],
          /*布尔值描述*/
          trueText: trueTextRule,
          /*布尔值*/
          trueValue: trueValueRule,
          /*布尔值描述*/
          falseText: falseTextRule,
          /*布尔值*/
          falseValue: falseValueRule,
          /*时间格式*/
          format: formatRule,
          /*枚举项*/
          elements: elementsRule,
          /*拓扑定义*/
          expands: {
            /*字符串最大长度*/
            maxLength: maxLengthRule
          }
        }
        /********************* 元素类型（结束） ***********************/
      },
    }
  },
  watch: {
    visible: {
      handler() {
        this.resetForm('form')
      },
      immediate: true
    },
    // 监听数据类型变化
    'formData.type': {
      handler(type) {
        this.byElementTypeVisible(undefined)
        this.byTypeVisible(type)
      },
      immediate: true
    },
    // 布尔值输入框显示给默认值，隐藏时删除默认值
    booleanVisible(value) {
      if (value) {
        this.$set(this.formData, 'trueText', this.formData.trueText || '是')
        this.$set(this.formData, 'trueValue', this.formData.trueValue || 'true')
        this.$set(this.formData, 'falseText', this.formData.falseText || '否')
        this.$set(this.formData, 'falseValue', this.formData.falseValue || 'false')
      } else {
        this.$set(this.formData, 'trueText', undefined)
        this.$set(this.formData, 'trueValue', undefined)
        this.$set(this.formData, 'falseText', undefined)
        this.$set(this.formData, 'falseValue', undefined)
      }
    },
    // 单位输入框隐藏时重置数据
    unitVisible(value) {
      if (value) {
        this.$set(this.formData, 'unit', this.formData.unit)
      } else {
        this.$set(this.formData, 'unit', undefined)
      }
    },
    // 精度输入框隐藏时重置数据
    scaleVisible(value) {
      if (value) {
        this.$set(this.formData, 'scale', this.formData.scale)
      } else {
        this.$set(this.formData, 'scale', undefined)
      }
    },
    // 字符串最大长度输入框隐藏时重置数据
    maxLengthVisible(value) {
      if (value) {
        this.$set(this.formData.expands, 'maxLength', this.formData.expands.maxLength)
      } else {
        this.$set(this.formData.expands, 'maxLength', undefined)
      }
    },
    // 枚举项输入框隐藏时重置数据
    enumVisible(value) {
      if (value) {
        this.$set(this.formData, 'elements', this.formData.elements || [{}])
      } else {
        this.$set(this.formData, 'elements', [{}])
      }
    },
    // 时间格式输入框隐藏时重置数据
    dateFormatVisible(value) {
      if (value) {
        this.$set(this.formData, 'format', this.formData.format)
      } else {
        this.$set(this.formData, 'format', undefined)
      }
    },
    /*****************元素类型（开始）********************/
    'formData.elementType.type'(type) {
      this.byElementTypeVisible(type)
    },
    // 布尔值输入框显示给默认值，隐藏时删除默认值
    booleanElementVisible(value) {
      if (value) {
        this.$set(this.formData.elementType, 'trueText', this.formData.elementType.trueText || '是')
        this.$set(this.formData.elementType, 'trueValue', this.formData.elementType.trueValue || 'true')
        this.$set(this.formData.elementType, 'falseText', this.formData.elementType.falseText || '否')
        this.$set(this.formData.elementType, 'falseValue', this.formData.elementType.falseValue || 'false')
      } else {
        this.$set(this.formData.elementType, 'trueText', undefined)
        this.$set(this.formData.elementType, 'trueValue', undefined)
        this.$set(this.formData.elementType, 'falseText', undefined)
        this.$set(this.formData.elementType, 'falseValue', undefined)
      }
    },
    // 单位输入框隐藏时重置数据
    unitElementVisible(value) {
      if (value) {
        this.$set(this.formData.elementType, 'unit', this.formData.elementType.unit)
      } else {
        this.$set(this.formData.elementType, 'unit', undefined)
      }
    },
    // 精度输入框隐藏时重置数据
    scaleElementVisible(value) {
      if (value) {
        this.$set(this.formData.elementType, 'scale', this.formData.elementType.scale)
      } else {
        this.$set(this.formData.elementType, 'scale', undefined)
      }
    },
    // 字符串最大长度输入框隐藏时重置数据
    maxLengthElementVisible(value) {
      if (value) {
        this.$set(this.formData.elementType.expands, 'maxLength', this.formData.elementType.expands.maxLength)
      } else {
        this.$set(this.formData.elementType.expands, 'maxLength', undefined)
      }
    },
    // 枚举项输入框隐藏时重置数据
    enumElementVisible(value) {
      if (value) {
        this.$set(this.formData.elementType, 'elements', this.formData.elementType.elements || [{}])
      } else {
        this.$set(this.formData.elementType, 'elements', [{}])
      }
    },
    // 时间格式输入框隐藏时重置数据
    dateFormatElementVisible(value) {
      if (value) {
        this.$set(this.formData.elementType, 'format', this.formData.elementType.format)
      } else {
        this.$set(this.formData.elementType, 'format', undefined)
      }
    },
    /*****************元素类型（结束）********************/
  },
  created() {
    this.getUnits()
  },
  methods: {
    async handleSubmit() {
      let result;
      await this.$refs['form'].validate(valid => result = valid)
      return result;
    },
    /**
     * 获取单位选择器数据
     * @returns {[]}
     */
    getCascaderUnitData() {

      let options = [];

      if (!this.units) {
        return options;
      }

      let parentNode = new Map();

      this.units.forEach(datum => {

        let type = datum.type;
        let value = datum.value;
        let text = datum.text;

        let children = parentNode.get(type);

        if (!children) {
          parentNode.set(type, [])
        }

        parentNode.get(type).push( {
          value: value,
          label: text
        })
      })

      parentNode.forEach((children, text) => {
        options.push({
          label: text,
          children: children
        })
      })

      return options;
    },

    /**
     * 枚举项每项间隔样式设置
     */
    spaceBetweenEnumStyle(index) {

      if (index === 0) {
        return { 'margin-top': '0' }
      }

      return { 'margin-top': '20px' }
    },

    /**
     * 新增枚举项
     */
    addEnumDomain() {
      this.formData.elements.push({})
    },
    /**
     * 删除枚举项
     */
    removeEnumDomain(index) {
      if (index > 0) {
        this.formData.elements.splice(index, 1)
        return
      }
      this.formData.elements.pop()
    },

    /**
     * 新增枚举项显示与隐藏处理
     */
    buttonAddEnumVisible(index) {
      return index === (this.formData.elements.length - 1)
    },
    /**
     * 移除枚举项显示与隐藏处理
     */
    buttonRemoveEnumVisible(index) {
      if (index === 0 && this.formData.elements.length > 1) {
        return true
      }
      if (index === 0 && this.formData.elements.length === 1) {
        return false
      }
      return index !== 0
    },
    /*****************元素类型（开始）********************/
    /**
     * 新增枚举项
     */
    addEnumElementDomain() {
      this.formData.elementType.elements.push({})
    },
    /**
     * 删除枚举项
     */
    removeEnumElementDomain(index) {
      if (index > 0) {
        this.formData.elementType.elements.splice(index, 1)
        return
      }
      this.formData.elementType.elements.pop()
    },
    /**
     * 新增枚举项显示与隐藏处理
     */
    buttonAddEnumElementVisible(index) {
      return index === (this.formData.elementType.elements.length - 1)
    },
    /**
     * 移除枚举项显示与隐藏处理
     */
    buttonRemoveEnumElementVisible(index) {
      if (index === 0 && this.formData.elementType.elements.length > 1) {
        return true
      }
      if (index === 0 && this.formData.elementType.elements.length === 1) {
        return false
      }
      return index !== 0
    },
    /*****************元素类型（结束）********************/

    /** 子表单添加按钮操作*/
    handleChildAdd() {
      this.$refs.propertiesChildAddEdit.handleAdd()
    },
    /** 子表单更新按钮操作*/
    handleChildUpdate(data) {
      data = JSON.parse(JSON.stringify(data))
      this.$refs.propertiesChildAddEdit.handleUpdate(data)
    },
    /** 子表单删除按钮操作*/
    handleChildDelete(index) {
      if (this.formData.type === 'array') {
        this.formData.elementType.properties.splice(index, 1)
      } else {
        this.formData.properties.splice(index, 1)
      }
    },

    /**
     * 根据子页面隐藏与显示偏移当前页面，子页面显示当前页面左偏移200px，关闭还原
     * @param state
     */
    handleChildVisible(state) {
      this.$emit('child-visible', state)
    },
    /**
     * 接收子页面的表单数据
     * @param data
     */
    handleChildData(data) {
      data = JSON.parse(JSON.stringify(data))
      if (this.formData.type === 'array') {
        utils.arraySetValue(this, this.formData.elementType.properties, data)
      } else {
        utils.arraySetValue(this, this.formData.properties, data)
      }
    },

    /**
     * 获取单位数据
     */
    getUnits() {
      getUnits().then(({ data }) => {
        this.units = data || []
      })
    },

    /**
     * 根据数据类型隐藏表单属性
     * @param type 数据类型
     */
    byTypeVisible(type) {
      // 根据数据类型显示与隐藏单位选择框
      this.unitVisible = this.byTypeUnitVisible(type)
      // 根据数据类型显示与隐藏精度输入框
      this.scaleVisible = this.byTypeScaleVisible(type)
      // 根据数据类型显示与隐藏布尔值输入框
      this.booleanVisible = this.byTypeBooleanVisible(type)
      // 根据数据类型显示与隐藏字符串最大长度输入框
      this.maxLengthVisible = this.byTypeMaxLengthVisible(type)
      // 根据数据类型显示与隐藏枚举项输入框
      this.enumVisible = this.byTypeEnumVisible(type)
      // 根据数据类型显示与隐藏时间格式输入框
      this.dateFormatVisible = this.byTypeDateFormatVisible(type)
      /*****************元素类型（开始）********************/
      // 根据数据类型显示与隐藏元素类型输入框
      this.elementTypeVisible = this.byTypeElementTypeVisible(type)
      /*****************元素类型（结束）********************/
      // 根据数据类型显示与隐藏JSON对象选择框
      this.propertiesVisible = this.byTypePropertiesVisible(type)
    },

    /**
     * 根据元素数据类型隐藏表单属性
     * @param type 元素数据类型
     */
    byElementTypeVisible(type) {
      // 根据元素类型显示与隐藏单位选择框
      this.unitElementVisible = this.byTypeUnitVisible(type)
      // 根据元素类型显示与隐藏精度输入框
      this.scaleElementVisible = this.byTypeScaleVisible(type)
      // 根据元素类型显示与隐藏布尔值输入框
      this.booleanElementVisible = this.byTypeBooleanVisible(type)
      // 根据元素类型显示与隐藏字符串最大长度输入框
      this.maxLengthElementVisible = this.byTypeMaxLengthVisible(type)
      // 根据元素类型显示与隐藏枚举项输入框
      this.enumElementVisible = this.byTypeEnumVisible(type)
      // 根据元素类型显示与隐藏时间格式输入框
      this.dateFormatElementVisible = this.byTypeDateFormatVisible(type)
      // 根据数据类型显示与隐藏JSON对象选择框
      this.propertiesElementVisible = this.byTypePropertiesVisible(type)
    },

    /**
     * 根据数据类型显示与隐藏单位选择框
     * @param type
     */
    byTypeUnitVisible(type) {
      return type === 'int' || type === 'long' || type === 'float' || type === 'double'
    },
    /**
     * 根据数据类型显示与隐藏精度输入框
     * @param type
     */
    byTypeScaleVisible(type) {
      return type === 'float' || type === 'double'
    },
    /**
     * 根据数据类型显示与隐藏布尔值输入框
     * @param type
     */
    byTypeBooleanVisible(type) {
      return type === 'boolean'
    },
    /**
     * 根据数据类型显示与隐藏字符串最大长度输入框
     * @param type
     */
    byTypeMaxLengthVisible(type) {
      return type === 'string'
    },
    /**
     * 根据数据类型显示与隐藏字符串最大长度输入框
     * @param type
     */
    byTypeEnumVisible(type) {
      return type === 'enum'
    },
    /**
     * 根据数据类型显示与隐藏时间格式输入框
     * @param type
     */
    byTypeDateFormatVisible(type) {
      return type === 'date'
    },
    /**
     * 根据数据类型显示与隐藏JSON对象选择框
     * @param type
     */
    byTypePropertiesVisible(type) {
      return type === 'object'
    },

    /**
     * 根据数据类型显示与隐藏元素类型输入框
     * @param type
     */
    byTypeElementTypeVisible(type) {
      return type === 'array'
    },


  }
}
</script>

<style lang="scss" scoped>

// 连接符
.joint-mark-icon {
  text-align: center;
}

// 枚举项增删按钮
.enum-add-remove-button {
  // 按钮居中
  text-align: center;

  // 枚举项增删图标
  .enum-add-remove-icon {
    color: #5a5e66;
  }
}

</style>
